<template>
  <a-collapse-panel name="ElementMultiInstanceLoop   ">
    <template #header>
      <collapse-title title="会签类型">
        <lucide-icon name="PlayCircle" />
      </collapse-title>
    </template>
    <div>
      <edit-item label="会签类型">
        <a-select style="width: 100%" v-model="form.type" @change="handleLoopType">
          <a-select-option v-for="{ label, value } in options" :value="value" :key="value">
            {{ label }}
          </a-select-option>
        </a-select>
      </edit-item>
      <edit-item label="实例数量" v-if="form.type">
        <a-input v-model="form.loopCardinality" @change="changeLoopCardinality" />
      </edit-item>
      <edit-item label="完成条件" v-if="form.type">
        <a-input v-model="form.completionCondition" @change="changeCompletionCondition" />
      </edit-item>
      <edit-item label="任务参与人列表" v-if="form.type">
        <a-input v-model="form.collection" @change="changeCollection" />
      </edit-item>
      <edit-item label="元素变量" v-if="form.type">
        <a-input v-model="form.elementVariable" @change="changeElementVariable" />
      </edit-item>
      <edit-item label="异步前" v-if="form.type">
        <a-switch v-model="form.acBefore" @change="changeAcBefore" />
      </edit-item>
      <edit-item label="异步后" v-if="form.type">
        <a-switch v-model="form.acAfter" @change="changeAcAfter" />
      </edit-item>
      <edit-item label="排除" v-if="form.acBefore && form.exclusive && form.type">
        <a-switch v-model="form.exclusive" @change="changeExclusive" />
      </edit-item>
      <edit-item label="重试周期" v-if="form.acAfter && form.type">
        <a-input v-model="form.timeCycle" @change="changeTimeCycle" />
      </edit-item>
    </div>
  </a-collapse-panel>
</template>

<script>
import {
  getFormValue,
  updateLoopCardinality,
  updateCompletionCondition,
  updateLoopCharacteristics,
  updateTimeCycle,
  updateLoopType
} from "@/bo-utils/multiInstanceLoopUtil";
import EventEmitter from "@/utils/EventEmitter";
import { mapState } from 'pinia'
import EditItem from '@/components/common/EditItem.vue'
import modelerStore from '@/store/modeler'
export default {
  name: "ElementMultiInstanceLoop",
  components: { EditItem },
  title: "会签设置",
  icon: "user",
  data() {
    return {
      form: {
        loopCardinality: "",
        completionCondition: "",
        collection: "",
        elementVariable: "",
        acBefore: false,
        acAfter: false,
        acExclusive: "",
        type: ""
      },
      options: [
        { label: "无", value: "" },
        { label: "并行多重事件", value: "parallel" },
        { label: "顺序多重事件", value: "seq" }
      ]
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId']),
  },
  mounted() {
    this.getFormValue();
    EventEmitter.on("element-update", this.getFormValue);
  },
  methods: {
    getFormValue() {
      this.form = getFormValue(this.getActive);
    },
    changeLoopCardinality(e) {
      const value = e.target.value;
      updateLoopCardinality(this.getActive, value);
    },
    changeCompletionCondition(e) {
      const value = e.target.value;
      updateCompletionCondition(this.getActive, value);
    },
    changeCollection(e) {
      const value = e.target.value;
      updateLoopCharacteristics(this.getActive, { collection: value });
    },
    changeElementVariable(e) {
      const value = e.target.value;
      updateLoopCharacteristics(this.getActive, { elementVariable: value });
    },
    changeAcBefore() {
      updateLoopCharacteristics(this.getActive, { acBefore: this.form.acBefore });
    },
    changeAcAfter() {
      updateLoopCharacteristics(this.getActive, { acAfter: this.form.acAfter });
    },
    changeExclusive() {
      updateLoopCharacteristics(this.getActive, {
        exclusive: this.form.exclusive
      });
    },
    changeTimeCycle(e) {
      const value = e.target.value;
      updateTimeCycle(this.getActive, value);
    },
    handleLoopType(value) {
      updateLoopType(this.getActive, value);
    }
  }
};
</script>
